<template>
    <div>
        <BaHeader/>
        <div class="staffvalidation-container">
            <header class="header" v-if="isMobileDevice===true">员工验证</header>
            <section class="content" v-if="isMobileDevice===true">
                <h2 class="title">员工身份验证</h2>
                <div class="sub-title">员工或有赞授权代理商身份验证</div>
                <div class="block-search" id="js-search">
                    <div class="search-tip">请输入要验证的手机号码</div>
                    <input placeholder="请输入要验证的手机号" type="number"> <span class="primary-button" @click="veriHandle">查询</span>
                    <div class="search-validate-tip">请输入正确的手机号格式</div>
                </div>
            </section>
            <section class="content" v-else>
                <div class="bg">
                    <div class="bg-left"></div>
                    <img height="536" src="//b.yzcdn.cn/static/intro/img/staff_validation/bg@2x.png"/>
                    <div class="bg-right"></div>
                </div>
                <div class="container">
                    <h2 class="title">员工身份验证</h2>
                    <div class="sub-title">员工或授权代理商身份验证</div>
                    <div class="block-search" id="js-search">
                        <div class="search-tip">请输入要验证的手机号码</div>
                        <input placeholder="请输入要验证的手机号" v-model="verimob" type="text"/>
                        <el-button class="primary-button" @click="veriHandle">查询</el-button>
                        <div class="search-validate-tip">请输入正确的手机号格式</div>
                    </div>
                </div>
            </section>
            <div class="logo-container">
                <div class="logo logo1"><span>一键查询身份真伪</span></div>
                <div class="logo logo2"><span>官方校验放心沟通</span></div>
            </div>
        </div>
        <BaFooter/>
    </div>
</template>
<script setup lang="ts">

import {isMobile} from '~/utils/common'
import {useI18n} from 'vue-i18n'
import {initialize} from '~/api/common'
import {type Action, ElMessageBox} from "element-plus";
const isMobileDevice = ref(isMobile())
const siteConfig = useSiteConfig()
const {t} = useI18n()

useSeoMeta({
    title: '验证',
})
// definePageMeta({
//     layout: 'user',
//     name: 'user',
//     middleware: ['user-mount', 'auth'],
// })

const route = useRoute()
const userInfo = useUserInfo()
const memberCenter = useMemberCenter()

/**
 * 初始化请求
 * 若在 app.vue 发送此请求时已经登录，initialize 内会自动放弃请求
 */
await initialize(true)

const jumpFirstMenu = () => {
    let firstRoute = getFirstRoute(memberCenter.state.userMenus)
    if (firstRoute) {
        navigateTo({path: firstRoute.path})
    } else {
        ElNotification({
            type: 'error',
            message: t('No route found to jump~'),
        })
    }
}
const veriHandle=async ()=>{
    await Http.$fetch({
        url: 'api/index/verification',
        method: 'post',
        body: {'mobile':verimob.value},
    }).then(res => {
        if (res.code == 1) {
            ElMessageBox.alert(res.msg, '提示', {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: '确定',
                callback: (action: Action) => {
                    window.location.reload()
                    // ElMessage({
                    //     type: 'info',
                    //     message: `action: ${action}`,
                    // })
                },
            })
        }
    })
}

/**
 * 在中间件中处理时，jumpFirstMenu 后将导致部分元素水合失败
 */
if (userInfo.isLogin() && import.meta.client && route.name == 'user') {
    jumpFirstMenu()
}

const verimob=ref()
/**
 * onBeforeRouteUpdate 中不能跳转，直接监听
 */
watch(
    () => route.name,
    (val) => {
        if (val == 'user') jumpFirstMenu()
        memberCenter.setActiveRoute(route)
    }
)

onMounted(() => {
    memberCenter.setShrink(document.body.clientWidth < 992)
    memberCenter.setActiveRoute(route)
})
</script>

<style scoped>
@media screen and (min-width: 1024px) {
    .staffvalidation-container {
        font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft Yahei, STHeiti, SimSun, sans-serif;
        font-weight: 400
    }

    .staffvalidation-container .content {
        width: 100%;
        height: 536px;
        position: relative;
        color: #fff;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .staffvalidation-container .content .bg {
        position: absolute;
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
    }

    .staffvalidation-container .content .bg .bg-left {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #1c2331
    }

    .staffvalidation-container .content .bg .bg-right {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #0e111e
    }

    .staffvalidation-container .content .container {
        position: absolute;
        width: 100%;
        top: 160px
    }

    .staffvalidation-container .content .container h2.title {
        font-size: 26px;
        line-height: 36px;
        font-weight: 500;
        margin-bottom: 4px
    }

    .staffvalidation-container .content .container .sub-title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400
    }

    .staffvalidation-container .content .container .block-search {
        width: 510px;
        margin: 42px auto 0;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex
    }

    .staffvalidation-container .content .container .block-search .search-tip {
        position: absolute;
        top: -32px;
        left: 0;
        font-size: 16px;
        color: #969799;
        line-height: 24px;
        font-weight: 400;
        opacity: 0
    }

    .staffvalidation-container .content .container .block-search .search-validate-tip {
        position: absolute;
        bottom: -34px;
        left: 0;
        font-size: 16px;
        color: #d40000;
        line-height: 24px;
        font-weight: 400;
        opacity: 0
    }

    .staffvalidation-container .content .container .block-search input {
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 16px;
        color: #323233;
        line-height: 24px;
        padding: 20px 24px;
        width: 403px;
        border: none;
        outline: none;
        display: inline-block;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        margin: 0
    }

    .staffvalidation-container .content .container .block-search input[type=number] {
        -moz-appearance: textfield
    }

    .staffvalidation-container .content .container .block-search input::-webkit-input-placeholder {
        color: #969799
    }

    .staffvalidation-container .content .container .block-search input:-moz-placeholder, .staffvalidation-container .content .container .block-search input::-moz-placeholder {
        color: #969799
    }

    .staffvalidation-container .content .container .block-search input:-ms-input-placeholder {
        color: #969799
    }

    .staffvalidation-container .content .container .block-search input::placeholder {
        color: #969799
    }

    .staffvalidation-container .content .container .block-search input::-webkit-inner-spin-button, .staffvalidation-container .content .container .block-search input::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        margin: 0
    }

    .staffvalidation-container .content .container .block-search .primary-button {
        font-size: 20px;
        font-weight: 500;
        background-color: #155bd4;
        width: 108px;
        padding: 20px 0;
        border-radius: 0;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        cursor: pointer;
        color: #ffffff;
        height: 64px;
    }

    .staffvalidation-container .logo-container {
        width: 782px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0 auto;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 48px 0 88px
    }

    .staffvalidation-container .logo-container .logo {
        width: 300px;
        height: 178px;
        -webkit-box-shadow: 0 4px 20px 0 rgba(35, 50, 77, .08);
        box-shadow: 0 4px 20px 0 rgba(35, 50, 77, .08);
        position: relative;
        border-radius: 4px
    }

    .staffvalidation-container .logo-container .logo span {
        font-size: 18px;
        position: absolute;
        bottom: 41px;
        display: inline-block;
        width: 100%;
        text-align: center
    }

    .staffvalidation-container .logo-container .logo1 {
        background: center 43px url(//b.yzcdn.cn/static/intro/img/staff_validation/pc-search.png) no-repeat;
        background-size: 48px 48px
    }

    .staffvalidation-container .logo-container .logo2 {
        background: center 54px url(//b.yzcdn.cn/static/intro/img/staff_validation/pc-check.png) no-repeat;
        background-size: 58px 40px
    }
}

@media screen and (max-width: 650px) {
    .staffvalidation-container {
        font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft Yahei, STHeiti, SimSun, sans-serif;
        font-weight: 400;
        background: #fff;
        padding-bottom: 80px
    }
    .staffvalidation-container .header {
        padding: 12px 15px;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        background-color: #fff
    }

    .staffvalidation-container .content {
        width: 100%;
        height: 441px;
        padding-top: 100px;
        background: 50% url(//b.yzcdn.cn/static/intro/img/staff_validation/bg.png) no-repeat;
        background-size: cover;
        color: #fff;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .staffvalidation-container .content h2.title {
        font-size: 24px;
        line-height: 36px;
        font-weight: 500;
        margin-bottom: 4px
    }

    .staffvalidation-container .content .sub-title {
        font-size: 14px;
        line-height: 24px;
        font-weight: 400
    }

    .staffvalidation-container .content .block-search {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 335px;
        margin: 40px auto 20px;
        font-size: 16px
    }

    .staffvalidation-container .content .block-search .search-tip {
        top: -28px;
        color: #969799
    }

    .staffvalidation-container .content .block-search .search-tip, .staffvalidation-container .content .block-search .search-validate-tip {
        position: absolute;
        left: 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        opacity: 0;
        -webkit-transition: opacity .2s linear;
        -moz-transition: opacity .2s linear;
        transition: opacity .2s linear
    }

    .staffvalidation-container .content .block-search .search-validate-tip {
        bottom: -28px;
        color: #d40000
    }

    .staffvalidation-container .content .block-search input {
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: #323233;
        font-size: 16px;
        line-height: 24px;
        padding: 13px 16px;
        border: none;
        outline: none;
        display: inline-block;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin: 0;
        height: 50px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .staffvalidation-container .content .block-search input[type=number] {
        -moz-appearance: textfield
    }

    .staffvalidation-container .content .block-search input::-webkit-input-placeholder {
        color: #969799
    }

    .staffvalidation-container .content .block-search input:-moz-placeholder, .staffvalidation-container .content .block-search input::-moz-placeholder {
        color: #969799
    }

    .staffvalidation-container .content .block-search input:-ms-input-placeholder {
        color: #969799
    }

    .staffvalidation-container .content .block-search input::placeholder {
        color: #969799
    }

    .staffvalidation-container .content .block-search input::-webkit-inner-spin-button, .staffvalidation-container .content .block-search input::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        margin: 0
    }

    .staffvalidation-container .content .block-search .primary-button {
        font-weight: 500;
        background-color: #155bd4;
        width: 74px;
        border-radius: 0;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        cursor: pointer;
        height: 50px;
        line-height: 50px
    }

    .staffvalidation-container .logo-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 335px;
        margin: -50px auto 0;
        -webkit-box-shadow: 0 4px 20px 0 rgba(35, 50, 77, .08);
        box-shadow: 0 4px 20px 0 rgba(35, 50, 77, .08)
    }

    .staffvalidation-container .logo-container .logo {
        height: 126px;
        position: relative;
        background-color: #fff;
        background-repeat: no-repeat;
        width: 50%
    }

    .staffvalidation-container .logo-container .logo span {
        font-size: 14px;
        position: absolute;
        bottom: 30px;
        display: inline-block;
        width: 100%;
        text-align: center
    }

    .staffvalidation-container .logo-container .logo1 {
        background-size: 38px;
        background-image: url(//b.yzcdn.cn/static/intro/img/staff_validation/mobile-search.png);
        border-radius: 4px 0 0 4px;
        background-position: center 28px
    }

    .staffvalidation-container .logo-container .logo2 {
        background-size: 48px;
        background-image: url(//b.yzcdn.cn/static/intro/img/staff_validation/mobile-check.png);
        border-radius: 0 4px 4px 0;
        background-position: center 32px
    }

}
</style>
